<template>
  <el-page-header
    :icon="ArrowLeft"
    title="返回"
    class="page-header"
    @back="handleGo"
  >
    <template #content>
      <span class="text-large font-600 mr-3"> 菜品管理 </span>
    </template>
  </el-page-header>
  <el-table :data="goodsList.list" style="width: 100%">
    <el-table-column prop="id" label="菜品单号" width="180" align="center" />
    <el-table-column prop="good" label="菜品" width="180" align="center" />
    <el-table-column prop="goodsPrices" label="价格"  align="center" />
    <el-table-column prop="address" label="操作" align="center" >
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="editRow(scope.row)"
          >编辑</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 编辑 -->
  <div class="editgood" v-show="visible">
    <div class="edit-text">
      <div class="goodname tol">
        餐名<input type="text" v-model="goodname" />
      </div>
      <div class="goodprice tol">
        价格<input type="text" v-model="goodprice" />
      </div>
    </div>
    <div class="prevent">
      <div class="cancel" @click="handleCancel">取消</div>
      <div class="tr" @click="handleTrue">确定</div>
    </div>
  </div>

  <!-- 上新 -->
  <div class="meal-management" @click="addgood">菜品上新</div>

  <div class="add-good" v-show="addvisible">
    <div class="add">新添加</div>
    <div class="add-text">
      <div class="addgoodname addvl">
        餐名<input type="text" v-model="newName" />
      </div>
      <div class="addgoodprice addvl">
        价格<input type="text" v-model="newPrice" />
      </div>
    </div>
    <div class="addprevent">
      <div class="addcancel" @click="addCancel">取消</div>
      <div class="addtr" @click="addtr">确定</div>
    </div>
  </div>

  <!-- 修改推荐 -->
  <div class="meal-management  sell" @click="addsell">推荐套餐</div>
</template>

<script setup>
// import { ElMessage } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import "../../../mock/orderMock";
let router = useRouter();
let handleGo = () => {
  router.go(-1);
};

// 请求列表
let goodsList = reactive({ list: [] });
onMounted(() => {
  axios.get("/api/goods/list").then((res) => {
    goodsList.list = res.data.list;
  });
});

// 删除
let deleteRow = (row) => {
  axios.post("/api/goods/delete", { id: row.id }).then((res) => {
    goodsList.list = res.data.list.list;
  });
};

// 编辑
let id = ref("");
let goodname = ref("");
let goodprice = ref("");
let visible = ref(false);
let editRow = (row) => {
  goodname.value = row.good;
  goodprice.value = row.goodsPrices;
  id.value = row.id;
  visible.value = !visible.value;
};
// 取消
let handleCancel = () => {
  visible.value = !visible.value;
};
// 确定修改
let handleTrue = () => {
  if (goodname.value == false) {
    alert("请输入菜名");
  } else if (goodprice.value == false) {
    alert("请输入价格");
  } else {
    axios
      .post("/api/goods/edit", {
        id: id.value,
        good: goodname.value,
        goodsPrices: goodprice.value,
      })
      .then((res) => {
        console.log(2);
        goodsList.list = JSON.parse(localStorage.getItem("good_list")).list;
      });
    visible.value = !visible.value;
  }
};

// 添加菜品
let newName = ref("");
let newPrice = ref("");
let addvisible = ref(false);
let addgood = () => {
  addvisible.value = !addvisible.value;
};
// 确定添加
let addtr = () => {
  if (newName.value == false) {
    alert("请输入菜名");
  } else if (newPrice.value == false) {
    alert("请输入价格");
  } else {
    let flag = true;
    goodsList.list.forEach((item) => {
      if (newName.value == item.good) {
        flag = false;
        alert("已存在");
      }
    });
    if (flag) {
      axios
        .post("/api/goods/add", {
          good: newName.value,
          goodsPrices: newPrice.value,
        })
        .then((res) => {
          goodsList.list = JSON.parse(localStorage.getItem("good_list")).list;
        });
      newName.value = "";
      newPrice.value = "";
      addvisible.value = !addvisible.value;
    }
  }
};
// 取消添加
let addCancel = () => {
  addvisible.value = !addvisible.value;
};


// 添加套餐
let addsell = ()=>{
  router.push('/index/sell');
}
</script>

<style scoped lang="scss">
.page-header {
  background: rgb(242, 242, 242);
  height: 85px;
  margin-top: -20px;
  padding-left: 20px;
  .text-large {
    line-height: 85px;
  }
}
.editgood {
  position: fixed;
  width: 400px;
  height: 300px;
  border: 1px solid #f5f5f5;
  top: calc(50% - 220px);
  left: calc(50% - 250px);
  z-index: 999;
  background: #f5f5f5;
  border-radius: 10px;
  .edit-text {
    .tol {
      text-align: center;
      margin: 50px 0;
      color: #999999;
      input {
        outline: none;
        border: none;
        width: 300px;
        height: 35px;
        margin-left: 10px;
        padding-left: 10px;
      }
    }
  }
  .prevent {
    display: flex;
    justify-content: space-around;
    div {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 3px 4px cadetblue;
      cursor: pointer;
    }
    .cancel {
      background: green;
    }
    .tr {
      background: red;
    }
  }
}
.meal-management {
  position: absolute;
  right: 220px;
  top: 90px;
  font-size: 14px;
  color: #666666;
}

.sell{
  position: absolute;
  left: 400px;
  top: 90px;
  width: 60px;
}
.meal-management:hover {
  color: darkgray;
  cursor: pointer;
}
.add-good {
  position: fixed;
  width: 400px;
  height: 300px;
  top: calc(50% - 220px);
  left: calc(50% - 250px);
  z-index: 999;
  background: #f5f5f5;
  .add {
    text-align: center;
    margin: auto;
    position: absolute;
    top: 10px;
    left: calc(50% - 20px);
    color: sienna;
    background: #999999;
    padding: 5px 10px;
  }
  .add-text {
    .addvl {
      text-align: center;
      margin: 50px 0;
      color: red;
      input {
        outline: none;
        border: none;
        width: 300px;
        height: 35px;
        margin-left: 10px;
        padding-left: 10px;
      }
    }
  }
  .addprevent {
    display: flex;
    justify-content: space-around;
    div {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
    .addcancel {
      background: #999999;
    }
    .addtr {
      background: #999999;
    }
  }
}
</style>